<script setup>
import {ref,  onMounted} from 'vue'
import { useRouter } from 'vue-router'
import {inquireApply} from "@/api/apply.js";
import dayjs from "dayjs";
import {centsToYuan, numberToStatus} from "@/utiles/typeConverter.js";

const router = useRouter()
const applies = ref([])
// 搜索参数
const startDate = ref()
const endDate = ref()

// 分页相关
const currentPage = ref(1)
const pageSize = ref(8)
const total = ref(0)

// 状态标签类型映射
const getStatusType = (status) => {
  const statusMap = {
    '差旅申请草稿': 'info',
    '预支付款审核通过': 'success',
    '差旅申请未通过':'error',
    '报销申请未通过':'error',
    '已完成': 'success',
  }
  return statusMap[status] || 'primary'
}

// 查询处理
const handleSearch = async () => {
   const {data} = await inquireApply(startDate.value,endDate.value,pageSize.value,currentPage.value)
   console.log(data.data)
  applies.value = data.data.records || []
  total.value = data.data.total || 0
}


const handleCurrentChange = (val) => {
  currentPage.value = val
  handleSearch()
}

// 组件挂载时初始化
onMounted(() => {
  const today = dayjs()
  // 计算前一个月的日期
  startDate.value = today.subtract(1, 'month').format('YYYY-MM-DD')
  // 计算后一个月的日期
  endDate.value = today.add(1, 'month').format('YYYY-MM-DD')

  handleSearch()
})

const showStatus = (id) => {
  router.push({
    name: 'ApplyStatus',
    query: {
      id: id
    }
  })

}

</script>

<template>
  <div class="main">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>差旅管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container">
      <!-- 查询条件 -->
      <div class="search-form">
        <div class="search-item">
          <label class="search-label">出发时间</label>
          <el-date-picker
            v-model="startDate"
            type="date"
            placeholder="选择开始日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
          <span class="date-separator">至</span>
          <el-date-picker
            v-model="endDate"
            type="date"
            placeholder="选择结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </div>
        <el-button type="primary" class="search-btn" @click="handleSearch">查询</el-button>
      </div>

      <!-- 数据表格 -->
      <div class="table-section">
        <el-table :data="applies" style="width: 100%" empty-text="暂无数据">
          <el-table-column prop="applyId" label="申请id" width="160">
          </el-table-column>
          <el-table-column prop="purpose" label="出差事由" />
          <el-table-column  label="预算金额（元）" width="125" align="center">
            <template #default="scope">
              <span v-if="scope.row.totalBudgetAmount===0">
                —
              </span>
              <span v-else>
                {{centsToYuan(scope.row.totalBudgetAmount)}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="totalReimburseAmount" label="报销金额（元）" width="125" align="center">
            <template #default="scope">
              <span v-if="scope.row.totalReimburseAmount===0">
                —
              </span>
              <span v-else>
                {{scope.row.totalReimburseAmount}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="140">
            <template #default="scope">
              <el-tag
                :type="getStatusType(numberToStatus(scope.row.status))"
                size="small"
              >
                {{ numberToStatus(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="showStatus(scope.row.id)"
              >
                查看状态
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            layout="total,  prev, pager, next, jumper"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

  </div>
</template>


<style scoped lang="scss">
.container {

  max-width: 1200px;
  margin: 12px auto;
  background: #ffffff;
  padding: 30px;
  border: 1px solid #dddcdc;
}

.search-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-label {
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
}

.date-separator {
  color: #909399;
  margin: 0 8px;
}

.search-btn {
  margin-right: 100px;
}

.table-section {
  margin-top: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  margin-right: 280px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-item {
    flex-direction: column;
    align-items: stretch;
  }

  .date-separator {
    text-align: center;
    margin: 8px 0;
  }

  .search-btn {
    margin-left: 0;
    width: 100%;
  }
}
</style>
